<template>
  <div class="lg:flex lg:justify-between lg:pt-8">
    <!--        left-list-->
    <AboutList class="hidden lg:block lg:w-[24%]" />

    <div class="overflow-hidden lg:w-[73%]">
      <p class="my-8 pl-2 text-xl font-[600] lg:mb-6 lg:mt-2.5 uppercase">{{ $mt('My Orders') }}</p>
      <div>
        <div class="lg:mb-4 lg:flex lg:items-center lg:justify-between">
          <!--              tabs-->
          <div
            class="flex items-center hide-scrollbar overflow-x-auto mb-7 text-sm font-medium lg:justify-start lg:text-base">
            <div
              class="cursor-pointer relative mr-2.5 shrink-0 rounded-lg bg-[#2b3234] px-5 lg:px-16 py-2.5 text-center lg:mr-2"
              @click="handleSelectItem(item, index)"
              v-for="(item, index) in tabTitleList">
              <div class="relative">
                <div>{{ item.title }}</div>
                <span v-if="item.count" class="absolute right-[-11px] -top-1 text-xs text-[#828484]">
                  {{ item.count }}
                </span>
              </div>
              <div
                v-if="active === index"
                class="absolute bottom-0 left-[50%] h-1 w-8 translate-x-[-50%] rounded-t-5 bg-red1"></div>
            </div>
          </div>
          <!--            search-->
          <!--          <div-->
          <!--              class="mx-auto my-5 flex w-[300px] items-center justify-between rounded-3xl bg-[#232526] px-2.5 py-2.5 lg:w-[28%]">-->
          <!--            <input class="bg-[unset]" v-model="searchVal" placeholder="Search order ID, Product name"/>-->
          <!--            <van-icon name="search" size="16px"/>-->
          <!--          </div>-->
        </div>

        <div>
          <!--              有内容-->
          <div v-if="orderList.length">
            <OrderItem v-model="currentPage" @refresh="fetchData" />
          </div>
          <!--                empty-->
          <div v-else class="flex flex-col items-center justify-center">
            <common-empty class="mb-2.5" />
            <p>{{ $mt('No order matched.') }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import OrderItem from '~/components/order/orderItem.vue'
import AboutList from '~/components/account/AboutList.vue'
import { useOrderStore } from '~/store/order'
import { useOffsetPagination } from '@vueuse/core'
import CommonEmpty from '~/components/basis/CommonEmpty.vue'
useSeoMeta({ title: 'BitTopup - Order List' })
const curPage = ref(1)
const pageObj = ref({})
const { withLoadingToastRef, loadingRef } = useRequestLoading()
definePageMeta({
  middleware: 'auth',
})
const orderList = ref([])
const orderStore = useOrderStore()
const { orderTitleList } = storeToRefs(orderStore)
const active = ref(0)
const orderStatus = computed(() => {
  return tabTitleList.value[active.value].orderStatus
})
const tabTitleList = ref(orderTitleList.value)
const handleSelectItem = (item: object, index: number) => {
  active.value = index
}

//
function fetchData() {
  orderStore.getOrderList(currentPage.value, currentPageSize.value, orderStatus.value)
  orderList.value = orderStore.orderAllList.data
}

// vueUse
const { currentPage, currentPageSize, isFirstPage, prev, next } = useOffsetPagination({
  page: curPage.value,
  pageSize: 5,
  onPageChange: fetchData,
})

watch(
  () => active.value,
  async () => {
    if (process.server) return
    await orderStore.getOrderList(currentPage.value, currentPageSize.value, orderStatus.value)
    orderList.value = orderStore.orderAllList.data
  },
  { immediate: true },
)
withLoadingToastRef()
</script>

<style scoped lang="scss">
:deep(.van-tab--grow) {
  background-color: #1f2425;
  margin: 0 4px;
  border-radius: 30px;
}

:deep(.van-tab__text) {
  padding: 0 10px;
}
</style>
